<!DOCTYPE html>
<html style="font-size: 200px;">
<head>
	<title></title>
	<style type="text/css">
		* {
		    box-sizing: border-box;
		}
		body,html{
			padding: 0;
			margin: 0;
		}
		#bindundun{
			position: relative;
			margin-left: 1rem;
		    margin-top: .5rem;
		    height: 3.4rem;
		    width: 3rem;
		}
		.body{
			border: 0.06rem solid #000;
		    height: 100%;
		    width: 100%;
		    position: absolute;
		    border-radius: 55% 55% 55% 55% / 50% 50% 60% 60%;
		    top: 0;
			left: 0;
		    background: #fff;
		    z-index: 1;
		}
		.ear{
			width: .9rem;
			height: 1.2rem;
			position: absolute;
			top: 0;
			left: .2rem;
			border: 0.06rem  solid #000;
			border-radius: 50% 60% 60% 50% / 50% 50% 50% 50%;
			background: #000;
			z-index: 0;
			transform: rotate(-20deg);
		}
		.right_ear{
			right: .2rem;
			left: auto;
			transform: rotateY(180deg) rotate(-20deg);
		}
		.face_1{
			width: 2.2rem;
			height: 1.7rem;
			border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
			border: 0.05rem  solid #1c1f00;
			position: absolute;
			top: .45rem;
			left: .4rem;
			z-index: 1;
		}
		.face_2{
			width: 2.28rem;
			height: 1.78rem;
			border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
			border: 0.04rem  solid #335fe6;
			position: absolute;
			top: .41rem;
			left: .36rem;
			z-index: 1;
		}
		.face_3{
			width: 2.34rem;
			height: 1.84rem;
			border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
			border: 0.03rem  solid #ee39d3;
			position: absolute;
			top: .38rem;
			left: .33rem;
			z-index: 1;
		}
		.face_4{
			width: 2.38rem;
			height: 1.86rem;
			border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
			border: 0.02rem  solid #edf466;
			position: absolute;
			top: .36rem;
			left: .31rem;
			z-index: 1;
		}
		.face_5{
			width: 2.4rem;
			height: 1.88rem;
			border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
			border: 0.02rem  solid #6cf078;
			position: absolute;
			top: .34rem;
			left: .29rem;
			z-index: 1;
		}
		.left_hand{
			position: absolute;
			z-index: 0;
			width: .8rem;
			height: 1.3rem;
			border-radius: 50%;
			background: #000;
			top: 1rem;
			left: -.5rem;
			transform: rotate(-15deg);
		}
		.left_hand:after{
			position: absolute;
			content: '';
			width: 1.3rem;
			height: .8rem;
			background: #000;
			border-radius: 50%;
			transform: rotate(35deg);
			top: 0.71rem;
		}
		.right_hand{
			position: absolute;
			z-index: 0;
			height: .8rem;
			width: .8rem;
			border-radius: 50%;
			background: #000;
			right: -.5rem;
			top: 2.2rem;
		}
		.right_hand:after{
			position: absolute;
		    background: #000;
		    width: 0.8rem;
		    height: 0.8rem;
		    top: -0.24rem;
		    left: -0.26rem;
		    content: '';
		    transform: rotate(-47deg);
		    border-radius: 0 0 0 80%;
		}
		.left_foot{
			position: absolute;
		    background: #000;
		    width: .9rem;
		    height: .9rem;
		    top: 3rem;
		    left: .3rem;
		    border-radius: 50%;
		}
		.left_foot:after{
			position: absolute;
		    z-index: 0;
		    height: .9rem;
		    width: .9rem;
		    content: '';
		    background: #000;
		    top: -0.45rem;
		    transform: rotate(12deg);
		    left: 0.1rem;
		    border-radius: 0 50% 50% 0;
		}
		.right_foot{
			position: absolute;
		    background: #000;
		    width: .9rem;
		    height: .9rem;
		    top: 3rem;
		    right: .3rem;
		    border-radius: 50%;
		}
		.right_foot:after{
			position: absolute;
		    z-index: 0;
		    height: .9rem;
		    width: .9rem;
		    content: '';
		    background: #000;
		    top: -0.45rem;
		    transform: rotate(-12deg);
		    right: 0.1rem;
		    border-radius: 0 0 0 50%;
		}
		.left_eye{
			position: absolute;
		    width: 0.6rem;
		    height: .8rem;
		    top: 0.8rem;
		    left: 0.65rem;
		    background: #000;
		    z-index: 2;
		    border-radius: 50%;
		    transform: rotate(45deg);
		}
		.left_eye:after,.right_eye:after{
			position: absolute;
		    width: .3rem;
		    height: .3rem;
		    border: .03rem solid #fff;
		    border-radius: 50%;
		    content: '';
		    top: .1rem;
		    left: .15rem;
		}
		.right_eye:after{
			left: auto;
			right: .15rem;
		}
		.left_eye:before,.right_eye:before{
			top: .23rem;
		    left: .22rem;
		    position: absolute;
		    width: .1rem;
		    height: .1rem;
		    background: #fff;
		    border-radius: 50%;
		    content: '';
		}
		.right_eye:before{
			left: 0.22rem;
    		top: 0.18rem;
		}
		.right_eye{
			position: absolute;
		    width: 0.6rem;
		    height: .8rem;
		    top: 0.8rem;
		    right: 0.65rem;
		    background: #000;
		    z-index: 2;
		    border-radius: 50%;
		    transform: rotate(-45deg);
		}
		.mouth{
			border: 0.05rem solid #000;
		    position: absolute;
		    top: 1.3rem;
		    width: 1rem;
		    height: 0.5rem;
		    z-index: 1;
		    left: 50%;
		    margin-left: -0.5rem;
		    border-radius: 0 0 50% 50% / 0 0 100% 100%;
		    border-top: none;
		}
		.mouth:after,.mouth:before{
			position: absolute;
			content: '';
			width: .5rem;
			background: #fff;
			height: 0.5rem;
    		top: -0.15rem;
    		transform: rotate(45deg);
		}
		.mouth:after{
			left: -0.21rem;
		}
		.mouth:before{
			right: -0.21rem;
		}
		.mouth_dot{
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
		.mouth_dot:after,.mouth_dot:before{
			position: absolute;
			top: .333rem;
			width: 0.05rem;
			height: 0.05rem;
			border-radius: 50%;
			background: #000;
			content: '';
		}
		.mouth_dot:after{
			left: .113rem;
		}
		.mouth_dot:before{
			right: .113rem;
		}
		.nose{
			background: #000;
			width: .3rem;
			height: .3rem;
			position: absolute;
			left: 50%;
			margin-left: -0.15rem;
			top: 1.25rem;
			z-index: 1;
			transform: rotate(50deg) skewY(-10deg);
			border-radius: 30%;
		}
		.nose:after{
			width: 0.352rem;
		    height: 0.36rem;
		    position: absolute;
		    content: '';
		    border-radius: 50%;
		    border-top: 0.1rem solid #fff;
		    top: -0.07rem;
		    transform: rotate(-45deg) skewY(0deg);
		    left: -0.017rem;
		}
		.heart{
			width: .5rem;
	        height: .5rem;
	        position: absolute;
	        top: 1.25rem;
	        left: -.32rem;
	        z-index: 2;
		}
		.heart:before,.heart:after{
	        content: "";
	        position:absolute;
	        width: .12rem;
	        height: .2rem;
	        background-color: red;
	        border-radius: .2rem .2rem 0 0;
	        top: 0;
	    }
	    .heart:before{
	        transform:rotate(-45deg);
	        left: 0;
	    }
	    .heart:after{
	        transform:rotate(45deg);
	        right: .32rem;
	    }
	    .logo{
	    	background-image: url("./dongao.png");
	    	background-repeat: no-repeat;
	    	width: .5rem;
	    	position: absolute;
	    	height: .8rem;
	    	z-index: 2;
	    	background-size: contain;
	    	top: 2.45rem;
		    left: 50%;
		    margin-left: -0.25rem;
	    }
	</style>
</head>
<body>
	<div id="bindundun">
		<div class="body"></div>
		<div class="ear"></div>
		<div class="ear right_ear"></div>
		<div class="face_1"></div>
		<div class="face_2"></div>
		<div class="face_3"></div>
		<div class="face_4"></div>
		<div class="face_5"></div>
		<div class="left_hand"></div>
		<div class="right_hand"></div>
		<div class="left_foot"></div>
		<div class="right_foot"></div>
		<div class="left_eye"></div>
		<div class="right_eye"></div>
		<div class="mouth"><div class="mouth_dot"></div></div>
		<div class="nose"></div>
		<div class="heart"></div>
		<div class="logo"></div>
	</div>
</body>
</html>